<template>
  <div class="b-content">
    <div class="unable-style" v-if="!isAble"></div>

    <div class="icon-view">
      <i
        class="iconfont"
        v-for="(i, index) in iconfont_list"
        :key="i.icon"
        @click="onMenuClick(index)"
      >{{i.icon}}</i>
    </div>
    <div class="solid-view">
      <span class="solid"></span>
      <i class="iconfont" style="color: rgba(0, 0, 0);" @click="onResetViewClick">&#xe6b4;</i>
      <span class="solid"></span>
    </div>
    <!-- 字体 -->
    <div class="input-view">
      <el-select
        v-model="selectedFont"
        :placeholder="$t('message.cadViewer.paramSelect.paramHolds.selectFontHold')"
        @change="onParamsChange"
        class="l-ipt"
      >
        <el-option
          v-for="item in font"
          :key="item.fontValue"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="selectedFontSize"
        :placeholder="$t('message.cadViewer.paramSelect.paramHolds.fontSizeHold')"
        @change="onParamsChange"
        class="m-ipt"
      >
        <el-option
          v-for="count in 66"
          :key="count + 6"
          :label="count + 6"
          :value="count + 6"
        >{{count + 6}}</el-option>
      </el-select>
    </div>
    <div class="solid-view">
      <span class="solid"></span>
      <div :class="selectedBold ? 'active': '' ">
        <i class="iconfont" @click="onBoldClick">&#xe6b1;</i>
      </div>

      <div :class="selectedItalics ? 'active': '' ">
        <i class="iconfont" @click="onItalicsClick">&#xe6b2;</i>
      </div>

      <div :class="selectedUnderline ? 'active': '' ">
        <i class="iconfont" @click="onUnderlineClick">&#xe6b3;</i>
      </div>

      <span class="solid"></span>
    </div>
    <!-- 线条选择 -->
    <div class="input-view">
      <el-select
        v-model="selectedLineType"
        :placeholder="$t('message.cadViewer.paramSelect.paramHolds.lineTypeHold')"
        @change="onParamsChange"
        class="l-ipt"
      >
        <el-option
          v-for="item in soild"
          :key="item.fontValue"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="selectedLineWidth"
        :placeholder="$t('message.cadViewer.paramSelect.paramHolds.lineWidthHold')"
        @change="onParamsChange"
        class="m-ipt"
      >
        <el-option v-for="count in 10" :key="count" :label="count" :value="count">{{count}}</el-option>
      </el-select>
    </div>
    <!-- 颜色 -->
    <div class="color-view">
      <span class="solid"></span>
      <!-- 边框颜色 -->
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('message.cadViewer.paramSelect.paramHolds.boldColrHold')"
        placement="bottom"
      >
        <el-color-picker
          v-model="selectedLineColor"
          class="fill"
          @change="onParamsChange"
        ></el-color-picker>
      </el-tooltip>
      <!-- 填充颜色 -->
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('message.cadViewer.paramSelect.paramHolds.fillColrHold')"
        placement="bottom"
      >
        <el-color-picker
          v-model="selectedFillColor"
          class="fill"
          @change="onParamsChange"
        ></el-color-picker>
      </el-tooltip>
      <el-select
        v-model="selectedFillType"
        :placeholder="$t('message.cadViewer.paramSelect.paramHolds.fillColrHold')"
        @change="onParamsChange"
        class="l-ipt"
      >
        <el-option
          v-for="item in fillTypeList"
          :key="item.fontValue"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span class="solid"></span>
    </div>
    <!-- 下载 -->
    <i class="iconfont down" @click="onDownLoadClick">&#xe6c2;</i>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      iconfont_list: [
        {
          icon: "\ue6a9",
        },
        {
          icon: "\ue6ab",
        },
        {
          icon: "\ue6ac",
        },
        {
          icon: "\ue6ae",
        },
        {
          icon: "\ue6af",
        },
        {
          icon: "\ue6b0",
        },
      ],
      font: [
        {
          // value: "SimSun",
          value: "Meiryo",
          label: this.$t("message.cadViewer.paramSelect.fontNames[0]"),
        },
        {
          // value: "Microsoft YaHei",
          value: "Meiryo UI",
          label: this.$t("message.cadViewer.paramSelect.fontNames[1]"),
        },
        {
          // value: "STXihei",
          value: "MS Gothic",
          label: this.$t("message.cadViewer.paramSelect.fontNames[2]"),
        },
        {
          // value: "Verdana",
          value: "MS Mincho",
          label: this.$t("message.cadViewer.paramSelect.fontNames[3]"),
        },
        {
          // value: "Verdana",
          value: "MS PGothic",
          label: this.$t("message.cadViewer.paramSelect.fontNames[4]"),
        },
        {
          // value: "Verdana",
          value: "MS PMincho",
          label: this.$t("message.cadViewer.paramSelect.fontNames[5]"),
        },
        {
          // value: "Verdana",
          value: "MS UI Gothic",
          label: this.$t("message.cadViewer.paramSelect.fontNames[6]"),
        },
      ],
      soild: [
        {
          value: 0,
          label: this.$t("message.cadViewer.paramSelect.lineTypeNames[0]"),
        },
        {
          value: 1,
          label: this.$t("message.cadViewer.paramSelect.lineTypeNames[1]"),
        },
        {
          value: 2,
          label: this.$t("message.cadViewer.paramSelect.lineTypeNames[2]"),
        },
        {
          value: 3,
          label: this.$t("message.cadViewer.paramSelect.lineTypeNames[3]"),
        },
        {
          value: 4,
          label: this.$t("message.cadViewer.paramSelect.lineTypeNames[4]"),
        },
      ],
      left_iconfont: [
        {
          icon: "\ue6b6",
        },
        {
          icon: "\ue6be",
        },
        {
          icon: "\ue6bd",
        },
        {
          icon: "\ue6bf",
        },
        {
          icon: "\ue6bc",
        },
        {
          icon: "\ue6ba",
        },
        {
          icon: "\ue6b5",
        },
        {
          icon: "\ue6b9",
        },
        {
          icon: "\ue6b8",
        },
        {
          icon: "\ue6b7",
        },
        {
          icon: "\ue6c1",
        },
        {
          icon: "\ue6c0",
        },
      ],

      fillTypeList: [
        {
          value: 0,
          label: this.$t("message.cadViewer.paramSelect.fillTypeNames[0]"),
        },
        {
          value: 1,
          label: this.$t("message.cadViewer.paramSelect.fillTypeNames[1]"),
        },
        {
          value: 2,
          label: this.$t("message.cadViewer.paramSelect.fillTypeNames[2]"),
        },
      ],

      selectedFont: "",
      selectedFontSize: "",
      selectedLineType: "",
      selectedLineWidth: "",
      selectedFillType: "",

      selectedLineColor: "",
      selectedFillColor: "",

      selectedBold: false,
      selectedItalics: false,
      selectedUnderline: false,
    };
  },

  props: {
    selectedShapeParam: {},
    isAble: false,
  },
  watch: {
    selectedShapeParam(val) {
      console.log("selectedShapeParam  change");
      this.selectedFont = val.selectedFont;
      this.selectedFontSize = val.selectedFontSize;

      this.selectedBold = val.selectedBold;
      this.selectedItalics = val.selectedItalics;
      this.selectedUnderline = val.selectedUnderline;

      this.selectedLineType = val.selectedLineType;
      this.selectedLineWidth = val.selectedLineWidth;

      this.selectedLineColor = val.selectedLineColor;
      this.selectedFillColor = val.selectedFillColor;

      this.selectedFillType = val.selectedFillType;
    },
  },
  methods: {
    onBoldClick(e) {
      this.selectedBold = !this.selectedBold;
      this.onParamsChange();
    },

    onItalicsClick(e) {
      this.selectedItalics = !this.selectedItalics;
      this.onParamsChange();
    },

    onUnderlineClick(e) {
      this.selectedUnderline = !this.selectedUnderline;
      this.onParamsChange();
    },

    onParamsChange() {
      console.log("onParamsChange");
      console.log(this.getParamsSelect());
      this.$emit("handleSelectChange", this.getParamsSelect());
    },

    getParamsSelect() {
      return {
        selectedFont:
          this.selectedFont == "" ? this.font[0].value : this.selectedFont,
        selectedFontSize:
          this.selectedFontSize == "" ? "10" : this.selectedFontSize,
        selectedBold: this.selectedBold,
        selectedItalics: this.selectedItalics,
        selectedUnderline: this.selectedUnderline,
        selectedLineType:
          this.selectedLineType == ""
            ? this.soild[0].value
            : this.selectedLineType,
        selectedLineWidth:
          this.selectedLineWidth == "" ? "3" : this.selectedLineWidth,
        selectedLineColor:
          this.selectedLineColor == "" ? "#ff0000" : this.selectedLineColor,
        selectedFillColor:
          this.selectedFillColor == "" ? "#ff0000" : this.selectedFillColor,
        selectedFillType:
          this.selectedFillType == ""
            ? this.fillTypeList[0].value
            : this.selectedFillType,
      };
    },

    onResetViewClick() {
      this.$emit("handleResetViewClick", {});
    },

    onMenuClick(e) {
      if (e == 2) this.$emit("handlePrintClick", {});
    },
    onDownLoadClick() {
      this.$emit("handleDownLoadClick", {});
    },
  },
};
</script>
<style  lang="scss" scoped>
.b-content {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: rgba(245, 245, 245, 1);
  border: 1px solid rgba(226, 226, 226, 1);
  border-bottom: 1px solid #b4b4b4;

  .unable-style {
    position: absolute;
    width: 100%;
    height: 48px;
    background: rgba(100, 100, 100, 0.5);
    z-index: 5;
  }

  .icon-view {
    margin-left: 3px;
    .iconfont {
      font-size: 24px;
      cursor: pointer;
      color: rgba(149, 149, 149);
      margin: 0 8px;
    }
  }
  .solid-view {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .solid {
      width: 1px;
      height: 28px;
      margin: 0 8px;
      background: rgba(217, 217, 217, 1);
    }
    .iconfont {
      font-size: 24px;
      cursor: pointer;
      color: rgba(149, 149, 149);
      margin: 0 8px;
    }
  }
  .input-view {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 8px;
    .l-ipt {
      margin-right: 16px;
      ::v-deep .el-input__inner {
        width: 110px;
        height: 24px;
        background: rgba(252, 252, 252, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
      }
      ::v-deep .el-input__icon {
        line-height: 24px;
      }
    }
    .s-ipt {
      ::v-deep .el-input__inner {
        width: 47px;
        height: 24px;
        background: rgba(252, 252, 252, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
      }
      ::v-deep .el-input__icon {
        line-height: 24px;
      }
    }
    .m-ipt {
      ::v-deep .el-input__inner {
        width: 85px;
        height: 24px;
        background: rgba(252, 252, 252, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
      }
      ::v-deep .el-input__icon {
        line-height: 24px;
      }
    }
  }
  .color-view {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .solid {
      width: 1px;
      height: 28px;
      margin: 0 8px;
      background: rgba(217, 217, 217, 1);
    }
    .l-ipt {
      margin-right: 16px;
      ::v-deep .el-input__inner {
        width: 110px;
        height: 24px;
        background: rgba(252, 252, 252, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
      }
      ::v-deep .el-input__icon {
        line-height: 24px;
      }
    }
    .fill {
      width: 24px;
      height: 24px;
      margin: 0 8px;
      ::v-deep .el-color-picker__trigger {
        width: 24px;
        height: 24px;
      }
    }
  }
  .down {
    position: absolute;
    right: 24px;
    font-size: 24px;
    cursor: pointer;
    color: rgba(149, 149, 149);
  }
}

.active {
  background: rgba(220, 220, 220, 1);
  border-radius: 4px;
  border: 1px solid rgba(189, 189, 189, 1);
}
</style>
